<template>
  <div class="tags-card" :class="sideTheme">
    <div class="tags-top">
      <tags class="tags-icon" />
      <span>标签</span>
    </div>
    <div class="tags-content">
      <span
        v-for="(item, index) in list"
        :key="index"
        class="text"
        :style="`color:${fontColor()};font-size:${fontSize()}px;`"
        @click="toDetail(item)"
      >
        {{ item }}
      </span>
    </div>
  </div>
</template>

<script setup name="TagsCard">
import { useSettingsStore } from '@/store';
import { useRouter } from 'vue-router';
import { Tags } from '@vicons/fa';
import { getTags } from '@/api/home.js';
import { ref, toRefs, onMounted } from 'vue';
const router = useRouter();

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

const list = ref([]);

const fontColor = () => {
  return (
    'rgb(' +
    Math.round(Math.random() * 255) +
    ', ' +
    Math.round(Math.random() * 255) +
    ', ' +
    Math.round(Math.random() * 255) +
    ')'
  );
};

const fontSize = () => {
  return random(18, 24, 0);
};
const random = (maxNum, minNum, decimalNum) => {
  var max = 0,
    min = 0;
  minNum <= maxNum
    ? ((min = minNum), (max = maxNum))
    : ((min = maxNum), (max = minNum));
  switch (arguments.length) {
    case 1:
      return Math.floor(Math.random() * (max + 1));
      break;
    case 2:
      return Math.floor(Math.random() * (max - min + 1) + min);
      break;
    case 3:
      return (Math.random() * (max - min) + min).toFixed(decimalNum);
      break;
    default:
      return Math.random();
      break;
  }
};

const toDetail = (tagName) => {
  router.push({
    name: 'TageDetail',
    query: {
      name: tagName,
    },
  });
};

onMounted(() => {
  getTags().then((res) => {
    list.value = res.list.sort(() => {
      return Math.random() - 0.5;
    });
  });
});
</script>

<style lang="scss" scoped>
.tags-card {
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: 8px;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
  background: rgba(255, 255, 255, 0.9);
}
.tags-top {
  margin-bottom: 6px;
  .tags-icon {
    width: 18px;
    height: 18px;
    margin-bottom: -3px;
    margin-right: 5px;
  }
  span {
    font-size: 17px;
    color: #4c4948;
  }
}
.tags-content {
  box-sizing: border-box;
  width: 100%;
  .text {
    display: inline-block;
    margin: 0 5px;
    text-decoration: none;
    overflow-wrap: break-word;
    transition: all 0.2s;
  }
  .text:hover {
    color: #49b1f5 !important;
    cursor: url('../../assets/cur/x2.cur'), default !important;
  }
}
#wordCloud {
  width: 100%;
  height: 250px;
}

.theme-dark {
  background: rgba(0, 0, 0, 0.5) !important;
  .tags-top .tags-icon {
    color: #ffffffb3 !important;
  }
  .tags-top span {
    color: #ffffffb3 !important;
  }
}
</style>
